<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">
        新闻资讯表
        <div class="sn-title-more">
          <a href="#">
            <img src="@/assets/img/sn-title.png" />
          </a>
        </div>
      </div>
      <div class="sn-body">
        <div class="wrap-container" style="margin: 0px 0px 13px 0px;">
          <div class="table">
            <table border="0" cellpadding="0" cellspacing="0" class="table-header">
              <tbody>
                <tr>
                  <td width="60%">
                    <span>标 题</span>
                  </td>
                  <td width="20%">
                    <span>日 期</span>
                  </td>
                  <td width="20%">
                    <span>热 度</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <dv-scroll-board :config="config" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getNewsList } from '@/api/home'
  export default {
    name: "seamlessEchart",
    data() {
      return {
        listData: [{
          newsContnet: '钱花哪了?一图带你读懂年轻人的消费观',
          newsDate: '2020-05-05',
          newsReadingVolume: 2306
        }, {
          newsContnet: '“五一”假期前三天国内旅游收入超350亿元',
          newsDate: '2020-05-02',
          newsReadingVolume: 5689
        }, {
          newsContnet: '滴滴、美团、哈啰交战，本地生活会是终局？',
          newsDate: '2020-05-02',
          newsReadingVolume: 9
        }, {
          newsContnet: '“互联网+文化”逆势上行文娱消费云端真精彩',
          newsDate: '2020-04-25',
          newsReadingVolume: 288
        }, {
          newsContnet: '乐观还是悲观？巴菲特是个现实主义者！',
          newsDate: '2020-04-21',
          newsReadingVolume: 158
        }, {
          newsContnet: 'B站的后浪，会把爱优腾拍在沙滩上吗?',
          newsDate: '2020-04-20',
          newsReadingVolume: 889
        }, {
          newsContnet: '华为如何做投资的：先给两亿订单一年上市',
          newsDate: '2020-04-01',
          newsReadingVolume: 5800
        }, {
          newsContnet: '马斯克：特斯拉股价太高了，我要卖豪宅',
          newsDate: '2020-03-25',
          newsReadingVolume: 6
        }, {
          newsContnet: '人民日报海外版：云模式巧解“就业难”',
          newsDate: '2020-03-16',
          newsReadingVolume: 88
        }, {
          newsContnet: '刚刚港股"崩了"：狂跌近1000点！',
          newsDate: '2020-03-12',
          newsReadingVolume: 88
        }, {
          newsContnet: '个人健康信息码国家标准发布',
          newsDate: '2020-02-28',
          newsReadingVolume: 5
        }, {
          newsContnet: '传软银国际裁员约10%两名管理合伙人离职',
          newsDate: '2020-02-15',
          newsReadingVolume: 258
        }, {
          newsContnet: '27万个岗位：区块链、人工智能等专场招聘',
          newsDate: '2020-02-10',
          newsReadingVolume: 198
        }, {
          newsContnet: '一季度电商发展势头迅猛农村电商破1300万家',
          newsDate: '2020-02-08',
          newsReadingVolume: 19
        }],

        config: {
          oddRowBGC: 'rgba(255,0,0,0,7)',
          evenRowBGC: 'rgba(255,0,0,0,7)',
          waitTime: 2000,
          data: [
          ],
          rowNum: 7
        }
      }
    },
    computed: {

    },
    mounted() {
      // this.getData()
      let  formatData = this.formatData(this.listData);
      let configCopy = { ...this.config };
      configCopy.data = formatData;
      configCopy.rowNum = formatData.length -1;
      this.config = { ...configCopy };
    },
    methods: {
      async getData() {
        let res =  await getNewsList();
          let formatData;
          if (res.data.code === 200) {
            formatData = this.formatData(res.data.rows);

          } else {
            formatData = this.formatData(this.listData);
          }
          let configCopy = { ...this.config };
          configCopy.data = formatData;
          configCopy.rowNum = formatData.length -1;
          this.config = { ...configCopy };
      },
      // 将数组对象改为 listData格式类型
      formatData(data) {
        let result = [];
        for (let item of data) {
          let temp = [item.newsContnet, item.newsDate, item.newsReadingVolume];
          result.push(temp);
        }
        return result;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .sn-container {
    left: 69.5%;
    width: 30%;
    height: 100%;

    %table-style {
      width: 100%;
      height: 1.5rem;
      table-layout: fixed;

      tr {
        td {
          padding: 5px 5px;
          text-align: center;
          background-color: transparent;
          white-space: nowrap;
          overflow: hidden;
          color: #E2E5FF;
          font-size: 0.875rem;
        }
      }
    }

    .table {
      .table-header {
        @extend %table-style;
      }

    }

    .dv-scroll-board {
      height: 88% !important;

      /deep/ .rows {
        .row-item {
          text-align: center;
          font-size: 0.875rem;
          height: 1.5rem !important;
          line-height: 1.5rem !important;
          padding: 10px 0px;

          .ceil {
            &:nth-child(1) {
              width: 100% !important;
              text-align: left;
              cursor: pointer;
            }

            &:nth-child(3) {
              color: red;
            }
          }
        }
      }
    }
  }
</style>